<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        ol,
        li {
            list-style: none;
        }

        .d1 {
            display: flex;
        }

        .s1 {
            width: 1000px;
            height: 500px;
            background-color: aqua;
        }

        .s2 {
            width: 400px;
            height: 500px;
            background-color: green;
        }

        .box {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            margin-top: 10px;
            text-align: center;
        }
        .box img{
            width: 100%;
        }

        .box div {
            width: 23%;
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="d1">
        <section class="s1">
            <div class="box"></div>
        </section>
        <section class="s2"></section>
    </div>

</body>

</html>
<script>
    //先随便存模板数据
    var list = [{ "name": "高级办工桌", "money": 10000, "pic": "pic0.jpg" }, { "name": "高级办工桌", "money": 10000, "pic": "pic0.jpg" }, { "name": "高级办工桌", "money": 10000, "pic": "pic0.jpg" }, { "name": "高级办工桌", "money": 10000, "pic": "pic0.jpg" }]
    var boxEle = document.querySelector('.box')
    // 创建模板字符串
    function shop() {
        // 用innerHTML添加到页面内
        // map是数组常用方法，将数组映射到一个新数组。item是参数  映射的条件最终结果必须放在return之后。  最后用join('')把内容以''的形式连接起来    
        boxEle.innerHTML= list.map((item) => {
            return `<div>
            <img src="${item.pic}" alt="">
            <p>${item.name}</p>
            <p>${item.money}</p>
            <button>加入购物车</button>
        </div>
        `
        }).join('')
    }
    // boxEle.innerHTML = mobanzifuchuan
        //     第二种方法，
    // var mobanzifuchuan = ``
    // for (let i = 0; i < list.length; i++) {
    //     //设置左侧的简易模板
    //     boxEle.innerHTML=mobanzifuchuan += `
    //     <div>
    //         <img src="pic${i}.jpg" alt="">
    //         <p>${list[i].name}</p>
    //         <p>${list[i].money}</p>
    //         <button>加入购物车</button>
    //     </div>
    //     `
    // }
    //渲染商品
    //不会
    // var count=list.reduce((t,item)=>{
    //     return t+item.count
    // })
    // document.querySelector('.s2').innerHTML=`购物车${count}`
    shop()
</script>